<template>
	<view class="store-ad-setting">
		<view class="ad-main">
			<view class="ad-title">弹窗内容</view>
			<view class="ad-tip">建议图片尺寸520*1000</view>
			<view class="img-box">
				<uni-file-picker :limit="1" :auto-upload="false" @select="selectstoreADImg" v-model="adImg"
					fileMediatype="image" file-extname="png,jpg,jpeg"></uni-file-picker>
			</view>
		</view>
		<view class="setting-item">
			<view class="ad-title item-title">是否开启广告弹窗</view>
			<view>
				<switch color="#ffd589" @change="adSwitchChange" :checked="adSwitch" />
			</view>
		</view>
		<view class="footer-box">
			<view class="footer-btn" @click="submitEvent">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adImg: [],
				adSwitch: false,
				shopId: '',
				adID: ''
			};
		},
		methods: {
			//回显数据
			getDetail() {
				this.$request({
					method: 'get',
					url: `/applet/store/shopNotice/${this.shopId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res?.data) {
						const {
							id,
							image,
							status
						} = res.data
						this.adID = id
						let obj = {
							url: image || ''
						}
						this.adImg.push(obj)
						this.adSwitch = status === '0'
					}
				})
			},
			// 选择文件后触发
			selectstoreADImg(data) {
				this.sentPicture(data.tempFilePaths[0], 0)
			},
			// 文件上传
			sentPicture(path) {
				let requestBaseUrl = sessionStorage.getItem('requestBaseUrl')
				var uploadurl = `${requestBaseUrl}/resource/app/oss/upload`
				uni.uploadFile({
					url: uploadurl,
					filePath: path,
					name: 'file',
					formData: {},
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token'),
						'clientId': uni.getStorageSync('clientId')
					},
					success: (res) => {
						let resData = JSON.parse(res.data)
						let obj = {
							url: resData.data.url
						}
						this.adImg.push(obj)
					}
				});
			},
			// 广告开关控制
			adSwitchChange(e) {
				this.adSwitch = e.detail.value
			},

			// 保存设置
			submitEvent() {
				let imageUrl = ''
				if (this.adImg.length === 0) {
					uni.showToast({
						title: '请先上传广告图片',
						icon: 'none',
						duration: 2000
					})
					return
				} else {
					imageUrl = this.adImg[0].url
				}
				const data = {
					image: imageUrl,
					status: this.adSwitch ? '0' : '1', // 状态，0-启用，1-禁用
					shopId: this.shopId
				}
				if(this.adID){
					data.id= this.adID
				}
				this.$request({
					method: 'post',
					url: '/applet/store/shopNotice',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '保存成功',
							duration: 2000
						})
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			}
		},
		onLoad(option) {
			this.shopId = option.shopId
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.store-ad-setting {
		.ad-main {
			background: #FFF;
			padding: 32rpx;
		}
		
		.ad-tip{
			font-size: 20rpx;
			color: #CCC;
		}

		.ad-title {
			position: relative;
		}

		.ad-title::before {
			content: '';
			position: absolute;
			width: 8rpx;
			height: 32rpx;
			background: #ffd589;
			top: 8rpx;
			left: -20rpx;
		}

		.img-box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 64rpx;
		}

		.setting-item {
			display: flex;
			align-items: center;
			padding: 32rpx;
		}

		.ad-title {
			margin-right: 60rpx;
		}

		.footer-box {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 20rpx;
			box-sizing: border-box;
			background: #FFF;
			z-index: 999;
		}

		.footer-btn {
			font-size: 32rpx;
			text-align: center;
			padding: 30rpx 0;
			background: #ffd589;
			color: #FFF;
			border-radius: 40rpx;
			box-sizing: border-box;
			font-weight: bold;
		}
	}
</style>